<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	request.setAttribute("basePath", basePath);
%>
<!DOCTYPE HTML>
<html>
	<head>
		<base href="<%=basePath%>">
		<meta charset="UTF-8">
		<title>小程序助手-应用详情</title>
		<meta name="keywords" content="小程序助手,小程序商城,微信小程序,小程序">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<link href="static/miniApp/css/details.css" rel="stylesheet" />
		<link rel="stylesheet" href="static/miniApp/css/level-comment-2.css" />
		<link href="static/miniApp/css/ma5gallery.css" rel="stylesheet" type="text/css">
		<script src="static/miniApp/js/jquery-1.7.1.min.js" type="text/javascript"></script>
		<script src="static/miniApp/js/ma5gallery.js"></script>
		<script src="static/miniApp/js/functions.js"></script>
	</head>
	<body>
		<%@ include file="header.jsp"%>
		<div class="details-content">
			<div class="details-content-title">
				<img class="use-pic" src="uploadFiles/uploadImgs/pc/${pd.PROD_ICON}" />
				<div class="user-describe">
					<h4 class="title">
						<p class="app-name">${pd.PROD_NAME}</p>
						<div class="app_icon app-icon-list">
							<c:forEach items="${pd.LABELS_ARR}" var="item" varStatus="vs">
			        			<span class="icons">${item.LABLE_NAME }</span>
			        		</c:forEach>
						</div>
						<div class="comment-star-list level-box levelnum">
							<input value="${pd.STAR}" hidden/>
							<span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span>
						</div>
					</h4>
					<p class="author">作者：<span>${pd.AUTHOR }</span></p>
					<p class="describe">描述：${pd.PROD_DESC }</p>
				</div>
			</div>
			<div class="use-info">
				<div class="left">
					<p class="screenshot">截图</p>
					<div class="screenshot-img">
						<div class="screenshot-img-scroll site-header container">
						  <ul class="ma5-gallery">
							
							<c:forEach var="var" items="${varlist}" varStatus="vs">
								<c:if test="${vs.index le 3 }">
								<li class="gallery-item">
									<img src="<%=basePath %>uploadFiles/uploadImgs/pc/${var}" />
								</li>
								</c:if>
							</c:forEach>
							
							</ul>
						</div>
					</div>
				</div>
				<div class="right">
					<p class="screenshot">二维码</p>
					<img src="<%=basePath %>uploadFiles/uploadImgs/pc/${pd.QR_CODE_ICON}" />
					<p>发布时间 ：<a>${pd.PUBDATE }</a></p>
					<p>查看要求：<a>微信最新版本客户端，6.5.3 版本以上。</a></p>
					<p>作者：<a>${pd.AUTHOR }</a></p>
				</div>
			</div>
			
			<!--评论区域-->
			<div class="use-comment">
				<p class="screenshot">编辑评论</p>
				<div class="comment-box">
					<textarea class="comment-form" placeholder="请说说您的看法，字数不少于2个字" value=""></textarea>
					<input id='PROD_ID' value="${pd.ID}" hidden/>
					<input id='USER_ID' value="${loginId}" hidden/>
					
					<div class="comment-star">
						<span>评分</span>
						<div class="comment-star-list" id="choose">
							<span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span>
						</div>
						<div class="clear"></div>
					</div>
					<div class="comment-sumbit">
					<c:if test="${!empty loginName }">
					<span> </span>
						<button class="sumbit-but">发表评论</button>
						<div class="clear"></div>
				</c:if>
				<c:if test="${empty loginName }">
						<span><b><a id="header-login-2" class="header-login" > 登录  </a></b>后参与讨论 </span>
						
				</c:if>
				

					</div>
				</div>
				<div class="show-comment-box">
					<div class="show-head"><p>评论列表</p></div>
					<ul class="comment-ul">
						<c:forEach var="var" items="${commentList}" varStatus="vs">
						<li class="comment-list">
							<div class="user-information">
								<img src="<%=basePath%>uploadFiles/uploadImgs/userphoto/${var.ICON}" width="100%" class="user-pic"/>
								<div class="information">
									<span class="uesr-name">${var.NAME}</span>
									<span class="point"></span>
									<span class="date" date="${var.CREATE_DATE}"></span>
									<div class="clear"></div>
									<div class="comment-star-list levelnum">
										<input value="${var.STAR}" hidden/>
										<span class="star star_click"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><div class="clear"></div>
									</div>
								</div>
								<div class="clear"></div>
							</div>
							<div class="comment-centent">${var.CONTENT}</div>
						</li>
						</c:forEach>
						

					</ul>
				</div>
			</div>
		<!--end-->
		
		<script>
			$(function(){
				var starnum = 0
				$("#choose .star").bind("click",function(e){
					var that = $(this)
					that.nextAll().removeClass("star_click")
					
					if(that.hasClass("star_click")){
						
					}else{
						that.addClass("star_click").prevAll().addClass("star_click")
					}
					starnum = that.parent("#choose").children(".star_click").length
				});
				$(".sumbit-but").click(function(){
					var textconent = $(this).parents(".comment-sumbit").siblings("textarea").val();
					if(textconent == ""){
						alert("评论内容不能为空");
					}else if(starnum < 1 ){
						alert("需要评分后发布评论");
					}else{
						if(textconent.length < 2){
							alert("评论内容不小于2个字");
						}else{
							//alert(textconent+","+starnum)
							var PROD_ID = document.getElementById("PROD_ID").value; 
							var USER_ID = document.getElementById("USER_ID").value; 
							$.ajax({
							    type: "post",
							    dataType: "json",
							    url: "<%=basePath%>/app/comment/save",
							    //请求后台方法
							    data:{"CONTENT": textconent,"STAR": starnum, "PROD_ID": PROD_ID, "USER_ID": USER_ID},
							    success: function (result) {
							    	var code = result.code;
							    	if(code == '1'){
							    		alert("评论成功");
								    	location.reload();
							    	}else{
							    		alert(result.msg);
							    	}
							     },
							    error: function (response) {
							    	alert("评论失败");
							    }
							});
							
						}
					}
					
				})
				
				var leves = $(".levelnum").length
				for(var i=0;i<leves;i++){
					var leve = $(".levelnum").eq(i).children("input").val()
					for (var e=0;e<leve;e++) {
						$(".levelnum").eq(i).children("span").eq(e).addClass("star_click")
					}
				}
				
				var commentlist = $(".comment-list").length
				for(var ii=0;ii<commentlist;ii++){
					var str =$(".comment-list").eq(ii).find(".date").attr("date");
					var strsplit = str.split(".")[0]
					var datestr = fmtDate(strsplit);

					if(datestr.indexOf(" ")>-1){
						var index = datestr.split(' ');
				        var finalValue = index[index.length-2];
				        var finalValueindex = finalValue.split('/')
				        var finalValueindexn = finalValueindex[finalValueindex.length-3];
				        var finalValueindexy = finalValueindex[finalValueindex.length-2];
				        var finalValueindexr = finalValueindex[finalValueindex.length-1];
						$(".comment-list").eq(ii).find(".date").text(finalValueindexn+"年"+finalValueindexy+"月"+finalValueindexr+"日");
					}else{
						$(".comment-list").eq(ii).find(".date").text(datestr);
					}
				}

				
				function fmtDate(str){
					str = str.replace(/-/g,"/");
					var date = new Date(str);
					var timestamp = Date.parse(date);
					var nowDate = new Date();
					var newtimestamp = Date.parse(nowDate);
					var ms = newtimestamp - timestamp;
					var s = Math.round(ms / 1000);
					var result = "";
					if(s <= 60){
						result = s + "秒前";
						return result;
					}
					var min = Math.round(s/ 60);
					if(min <= 60){
						result = min + "分前";
						return result;
					}
					var h = Math.round(min/ 60);
					if(h <= 24){
						result = h + "小时前";
						return result;
					}
					return str;
				}
				
				
			})
		
			
		
	$("#header-login-2").click(function(){
	if($("#box-view").css("display") == "none"){
		$("#box-view").show();
	}else{
		$("#box-view").hide();
	}
	});

	$(".box_view_bg").click(function(){
		$("#box-view").hide();
	});

		</script>	
			
		</div>
		<%@ include file="footer.jsp"%>
	</body>
</html>
